<template>
  <div class="modal" v-if="isShowPro" >
    <div class="liveProfile_box">
      <div class="one bs_bdb flex_bt">
        <div class="fs_16 cur_poi">管理</div>
        <div>
          <img
            @click.stop="handleClosePro"
            style="width: 24px; height: 24px"
            src="../assets/close_head.png"
            alt=""
          />
        </div>
      </div>
      <div class="fff flex two fs_16">
        <span style="margin-right: 6px">{{
          liveProInfo?.profile1?.userinfo?.nickname
        }}</span>
        <img
          v-if="liveProInfo?.profile1?.userinfo?.sex === 1"
          style="width: 18px; height: 18px"
          class="search"
          src="../assets/sex_1.png"
          alt=""
        />
        <img
          v-if="liveProInfo?.profile1?.userinfo?.sex === 2"
          style="width: 18px; height: 18px"
          class="search"
          src="../assets/sex_2.png"
          alt=""
        />
      </div>
      <div class="three fs_12 flex">
        <div>ID：{{ liveProInfo?.profile1?.userinfo?.id }}</div>
        <div
          style="margin: 0 10px; height: 20px; border: 1px solid #707070"
        ></div>
        <div>IP归属地：{{ liveProInfo?.profile1?.userinfo?.ipcity }}</div>
        <div
          style="margin: 0 10px; height: 20px; border: 1px solid #707070"
        ></div>
        <div>粉丝：{{ liveProInfo?.profile2?.userinfo?.fanscount }}</div>
      </div>
      <div class="fs_14 flex five fff">
        {{ liveProInfo?.profile1?.userinfo?.jianjie }}
      </div>
      <div class="flex four">
        <div class="bg_box flex bs_bdb">
          <img
            style="width: 30px; height: 25px"
            :src="
              store.getRichLevel({
                val: liveProInfo?.profile2?.userinfo.giftcoin,
                ty: 'rich',
              }).url
            "
            alt=""
          />
          <div class="fff fs_11 pad_lef3">
            <div>
              {{
                store.getRichLevel({
                  val: liveProInfo?.profile2?.userinfo?.giftcoin,
                  ty: "rich",
                }).name
              }}
            </div>
            <div>
              {{
                store.getRichLevel({
                  val: liveProInfo?.profile2?.userinfo?.giftcoin,
                  ty: "rich",
                }).lv
              }}
            </div>
          </div>
        </div>
        <div class="bg_box flex bs_bdb">
          <img
            style="width: 30px; height: 25px"
            :src="
              store.getRichLevel({
                val: liveProInfo?.profile2?.userinfo.giftcoin,
                ty: 'charm',
              }).url
            "
            alt=""
          />
          <div class="fff fs_11 pad_lef3">
            <div>
              {{
                store.getRichLevel({
                  val: liveProInfo?.profile2?.userinfo?.giftcoin,
                  ty: "charm",
                }).name
              }}
            </div>
            <div>
              {{
                store.getRichLevel({
                  val: liveProInfo?.profile2?.userinfo?.giftcoin,
                  ty: "charm",
                }).lv
              }}
            </div>
          </div>
        </div>
        <div class="bg_box flex bs_bdb">
          <img
            style="width: 24px; height: 24px"
            src="../assets/icon_level.png"
            alt=""
          />
          <div class="fff fs_11 pad_lef3">
            <div>{{ liveProInfo?.profile1?.userinfo?.guizu }}</div>
            <div>{{ liveProInfo?.profile1?.userinfo?.isvip }}</div>
          </div>
        </div>
      </div>
      <div class="seven flex bs_bdb">
        <img
          :src="
            store.getRichLevel({
              val: liveProInfo?.profile1?.userinfo?.giftcoin,
              ty: 'rich',
            }).url
          "
          alt=""
        />
        <img
          :src="
            store.getRichLevel({
              val: liveProInfo?.profile1?.userinfo?.giftcoin,
              ty: 'charm',
            }).url
          "
          alt=""
        />
      </div>
      <div class="six fs_16 flex fff">
        <div class="six_item flex bs_bdb" @click="handleInfo">@</div>
        <div class="six_item flex bs_bdb" @click="handlePrivateChat">私信</div>
      </div>
      <div class="avatar flex">
        <div
          class="inner_avatar bd_radio flex"
          :style="{
            'box-shadow':
              liveProInfo?.profile1?.userinfo?.sex === 2
                ? '0 0 4px 4px rgb(236, 58, 103, 0.8)'
                : ' 0 0 4px 4px rgb(121, 34, 255, 0.4)',
          }"
        >
          <img class="bd_radio" :src="liveProInfo?.profile1?.avatar" alt="" />
        </div>
        <div
          class="follow flex fs_14 bs_bdb fff cur_poi"
          @click="handleFollow"
          :style="{
            background:
              liveProInfo?.profile2?.isfollow === 0 ? '#ff3166' : '#eee',
            color: liveProInfo?.profile2?.isfollow === 0 ? '#fff' : '#aaa',
          }"
        >
          {{ liveProInfo?.profile2?.isfollow === 0 ? "关注" : "已关注" }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, onBeforeMount, ref } from "vue";
import { useCounterStore } from "../store";
import { getIsFollow, $TipMessage } from "../http";
const store = useCounterStore();
const liveProInfo = ref(null);
const isShowPro = ref(false);
const handleFollow = () => {
  let isfollow = Number(liveProInfo.value?.profile2?.isfollow);
  console.log("isfollow-", isfollow);
  getIsFollow({
    followuid: liveProInfo.value.profile1.uuid,
    str: isfollow === 0 ? "follow" : "unfollow",
  }).then((res) => {
    console.log("handleFollow-res", res);
    if (res.data.errcode === 0) {
      liveProInfo.value.profile2.isfollow = Number(
        !liveProInfo.value.profile2.isfollow
      );
      store.mittOb.emit("follow", liveProInfo.value.profile1.uuid);
    }
  });
};

const handleTips = () => {
  $TipMessage("请关闭对话框,再进行其他操作", "warning");
};
const getProfile = (e) => {
  isShowPro.value = true;
  console.log("eee", e);
  liveProInfo.value = e;
};
const handleClosePro = () => {
  store.mittOb.emit("allOnline", "fun");
  isShowPro.value = false;
};

onBeforeMount(() => {
  console.log("store.mittOb", store.mittOb);
  store.mittOb.off("profile", "getProfile");
});
onMounted(() => {
  store.mittOb.on("profile", getProfile);
  store.mittOb.on("close", function (e) {
    console.log("1111close");
    isShowPro.value = e;
  });
});
</script>
<style scoped lang="scss">
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.liveProfile_box {
  z-index: 99999;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 332px;
  background: #282c2f;
  border-radius: 10px 10px 0px 0px;

  .one {
    padding: 10px 12px;
    color: #895cf8;
    img {
      cursor: pointer;
    }
  }
  .two {
    margin-top: 13px;
    margin-bottom: 22px;
  }
  .three {
    color: #cacecf;
    padding: 0 10px;
    // box-sizing: border-box;
  }
  .five {
    margin-top: 15px;
    margin-bottom: 25px;
  }
  .four {
    .bg_box {
      width: 96px;
      height: 42px;
      padding: 3px 7px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .bg_box:not(:last-child) {
      margin-right: 14px;
    }
    .bg_box:first-child {
      background-image: url("../assets/bg_level1.png");
    }
    .bg_box:nth-child(2) {
      background-image: url("../assets/bg_level2.png");
    }
    .bg_box:last-child {
      background-image: url("../assets/bg_level3.png");
    }
  }
  .six {
    .six_item {
      width: 99px;
      height: 34px;
    }
    .six_item:first-child {
      background: linear-gradient(88deg, #8332ff 0%, #5425ff 100%);
      border-radius: 50px 50px 50px 50px;
      margin-right: 46px;
    }
    .six_item:last-child {
      background: linear-gradient(88deg, #a933ff 0%, #7922ff 100%);
      border-radius: 50px 50px 50px 50px;
    }
  }
  .seven {
    padding: 22px 0 22px 0;
    img {
      width: 25px;
      height: 19px;
    }
    img:first-child {
      margin-right: 4px;
    }
  }
  .avatar {
    .inner_avatar {
      position: absolute;

      top: -49px;
      img {
        width: 87px;
        height: 87px;
      }
    }
    .inner_avatar_1 {
      box-shadow: 0 0 4px 4px rgba(236, 58, 103, 0.4);
    }
    .inner_avatar_2 {
      box-shadow: 0 0 4px 4px rgb(121, 34, 255, 0.4);
    }
    .follow {
      position: absolute;
      top: 20px;

      padding: 3px 13px;
      // height: 26px;
      border-radius: 50px 50px 50px 50px;
      //   border: 1px solid #ffffff;
      // background: #ff3166;
    }
    .un_act_foll {
      background: #eee !important;
      color: #aaa !important;
    }
  }
}
</style>
